<template>
  <div class="container"> 
      <ul class="first">
        <li v-for="(value,index) in showData" :key="index">
          <div class="title">
            <span class="firstNumber">{{value.taskNumber}}</span>
            <span class="firstTask">{{value.taskTitle}}</span>
            <img :src="value.dropImg" class="firstImg" @click="show(index,'first')"/>
          </div>
          <ul class="second"  :animation="value.animationData">
            <li v-for="(value2,index2) in value.taskList" :key="index2">
              <div class="secondTitle">
                <span class="firstNumber secondNumber">{{value2.listNumber}}</span>
                <span class="firstTask secondTask">{{value2.listTitle}}</span>
                <img :src="value2.dropImg" class="firstImg secondImg" @click="show(index,index2)"/>
              </div>
              <div class="secondShow" :animation="value2.animationData">
                <span class="uploadTitle">打开公众号“脑洞计划” 转发哪个推文至朋友圈，24小时后上传截图。</span>
                <span class="upload1">下载附件一</span>
                <span class="upload2">下载附件二</span>
                <input type="type" name="title" class="uploadInput"/>
                <ul class="uploadImg clearfix">
                  <li v-for="(value3,index3) in value2.addImg" :key="index3">
                   <img :src="value3.imgSrc" @click="add(value3.addTag,index,index2,value3.imgSrc)" class="uploadBtn"/>
                   <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/loveciy/img/error.png" class="error" @click="del(index,index2,value3.imgSrc)" v-show="value3.addTag==1 ? false : true"/>
                  </li>
                </ul>
                <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/loveciy/img/join/commit.png" class="commitBtn"/>
              </div>
            </li>
          </ul>
        </li>
      </ul>
      <img src="http://file.rzkeji.com/web/loveciy/img/footer.jpg" class="footer"/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      showData:[
       {
        tag:1,
        animationData:{},
        taskTitle:"任务一:转发推文至朋友圈",
        taskNumber:"50",
        dropImg:"http://file.rzkeji.com/web/loveciy/img/join/drop.png",
        ceng:0,
        taskList:[
         {
          listTitle:"任务一:转至朋友圈afa",
          listNumber:"",
          animationData:{},
          tag:1,
          dropImg:"http://file.rzkeji.com/web/loveciy/img/join/drop.png",
          addImg:[
           {
            imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
            addTag:1,     //这里当addTag=1的时候是可以添加照片，如果不是的话就是查看照片
           },
          ]
         },
         {
          listTitle:"任务一:至朋友圈afadsad",
          listNumber:"",
          animationData:{},
          tag:1,
          dropImg:"http://file.rzkeji.com/web/loveciy/img/join/drop.png",
          addImg:[
           {
            imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
            addTag:1,     //这里当addTag=1的时候是可以添加照片，如果不是的话就是查看照片
           },
          ]
         },
         {
          listTitle:"任务dsadsad转发友圈afa",
          listNumber:"",
          animationData:{},
          tag:1,
          dropImg:"http://file.rzkeji.com/web/loveciy/img/join/drop.png",
          addImg:[
           {
            imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
            addTag:1,     //这里当addTag=1的时候是可以添加照片，如果不是的话就是查看照片
           },
          ]
         }
        ]
       },
       {
        tag:1,
        animationData:{},
        taskTitle:"任务一:转发推文至朋友圈",
        taskNumber:"50",
        dropImg:"http://file.rzkeji.com/web/loveciy/img/join/drop.png",
        ceng:0,
        taskList:[
         {
          listTitle:"任务一:至朋友圈a",
          listNumber:"",
          animationData:{},
          tag:1,
          dropImg:"http://file.rzkeji.com/web/loveciy/img/join/drop.png",
          addImg:[
           {
            imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
            addTag:1,     //这里当addTag=1的时候是可以添加照片，如果不是的话就是查看照片
           },
          ]
         },
         {
          listTitle:"任务一:转友圈afadsad",
          listNumber:"",
          animationData:{},
          tag:1,
          dropImg:"http://file.rzkeji.com/web/loveciy/img/join/drop.png",
          addImg:[
           {
            imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
            addTag:1,     //这里当addTag=1的时候是可以添加照片，如果不是的话就是查看照片
           },
          ]
         },
         {
          listTitle:"任务dsadsadsa至朋友圈afa",
          listNumber:"",
          animationData:{},
          tag:1,
          dropImg:"http://file.rzkeji.com/web/loveciy/img/join/drop.png",
          addImg:[
           {
            imgSrc:"http://file.rzkeji.com/web/loveciy/img/join/upload.png",
            addTag:1,     //这里当addTag=1的时候是可以添加照片，如果不是的话就是查看照片
           },
          ]
         }
        ]
       }
      ]
    }
  },
  methods:{
    show(index,index2){
      var animation = wx.createAnimation({
          duration: 300,
          timingFunction: 'linear',
      })
      var animation1 = wx.createAnimation({
          duration: 300,
          timingFunction: 'linear',
      })
      let showData=this.showData[index];
      let taskList=showData.taskList;
      var length=(taskList.length)*42+10+(taskList.length)*20;
      if(index2 =="first")    //这里是点击第一层的时候执行的     这里有个小bug  如果两个都展开后，点击第一个直接收起来的时候就会出现bug
      {
        if(showData.tag==1)
        {
        animation.height(length).step();
        [showData.tag,showData.dropImg]=['0','http://file.rzkeji.com/web/loveciy/img/join/pull.png']
        }else{
        animation.height(0).step();
        [showData.tag,showData.dropImg]=['1','http://file.rzkeji.com/web/loveciy/img/join/drop.png']
        }
        showData.animationData=animation.export()
      }else{               //这里是点击第二层的时候执行的
        if(taskList[index2].tag==1)
        {
          taskList.forEach((item,i) => {
            animation1.height(0).step()
            animation.height(length).step();
            [taskList[i].tag,taskList[i].dropImg]=['1','http://file.rzkeji.com/web/loveciy/img/join/drop.png']
            taskList[i].animationData=animation1.export()
            showData.animationData=animation.export()
          })
          var length=length+300;
          animation1.height(300).step()         //这里因为上面那层已经固定高度 了，然后这个需要增加上面的一层高度才能显示出来
          animation.height(length).step()
          taskList[index2].tag=0;
          taskList[index2].dropImg="http://file.rzkeji.com/web/loveciy/img/join/pull.png"
        }else{
          animation1.height(0).step();
          animation.height(length).step();
          [taskList[index2].tag,taskList[index2].dropImg]=['1','http://file.rzkeji.com/web/loveciy/img/join/drop.png']
        }
          taskList[index2].animationData=animation1.export()
          showData.animationData=animation.export()
      }
    },
    add(addTag,index,index2,imgSrc){
      if(addTag==1){
        var _this=this;
        wx.chooseImage({
          count:9,
          sizeType:['original','compressed'],
          sourceType: ['album', 'camera'],
          success(res){
            res.tempFilePaths.forEach((item,i) => {
              _this.showData[index].taskList[index2].addImg.push({
                 imgSrc:res.tempFilePaths[i],
                 addTag:0
               })
            })
          }
        })
      }else{
        wx.previewImage({    //浏览照片
        current: imgSrc, // 当前显示图片的http链接
        urls: [imgSrc] // 需要预览的图片http链接列表
        })
     }
    },
    del(index,index2,imgSrc){
      this.removeByValue(this.showData[index].taskList[index2].addImg,imgSrc)
    },
    removeByValue(arr, val) {      //这个是用于删除指定数组的元素
      for(var i=0; i<arr.length; i++) {  
          if(arr[i].imgSrc == val) {  
          arr.splice(i, 1);  
          break;  
        }
      }  
    },
  },
  created () {
   
  },
  computed:{

  }
}
</script>

<style scoped>
.container{width: 100%;height: 100%;}
.first{width: 100%;height: 100%;margin-top: 10px;}
.first>li{width: 100%;display: flex; flex-direction: column;background: #fff;margin-top: 5px;font-size: 14px;border:1px solid gray;box-sizing:border-box;}
.title{width: 100%;height: 50px;display: flex;justify-content: row;text-align: center;line-height: 30px;border: 1px solid gray}
.firstNumber{width: 30px;height: 30px;background: blue;display: block;margin-left:7px;border-radius:30px;margin-top: 10px; }
.firstTask{width: 258px;height: 30px;display: block;margin-top: 10px;text-align: left;margin-left: 5px;}
.firstImg{width: 40px;height: 40px;display: block;margin-top: 6px;margin-left:30px;}
.second{width: 100%;height: 0px;overflow: hidden;}
.second>li{width: 92%;display: flex; flex-direction: column;margin-top: 20px;margin-left: 3%;border:1px solid gray;box-sizing:border-box;padding-top: 5px;padding-left: 1%;padding-bottom: 5px;padding-right: 1%}
.secondTitle{width: 100%;height: 30px;display: flex;justify-content: row}
.secondShow{width: 100%;height: 0px;overflow: hidden;}

.secondImg{width: 30px;height: 30px;}
.secondNumber{margin:0;}
.secondTask{margin:0;margin-left: 10px;}
.secondImg{margin:0;margin-left: 30px;}
.secondShow span{display: block}
.uploadTitle{width: 100%;height: 30px;font-size: 11px;}
.upload1{width:100%;height: 30px;font-size: 16px; }
.upload2{width:100%;height: 30px;font-size: 16px; }
.uploadInput{width: 96%;height: 30px;line-height: 30px;border-radius: 5px;margin-left: 2%;border:1px solid black;}
.uploadBtn{width: 50px;height: 50px;}
.uploadImg{width: 100%;height: 120px;}
.uploadImg li{width: 50px;height: 50px;float: left;margin-left: 15px;margin-top: 5px;position: relative;}
.error{width: 20px;height: 20px;position: absolute;right: 0;top: 0;}
.commitBtn{width: 100px;height: 40px;margin:20px auto;display: block;}
.footer{width: 100%;height: 36px;}
</style>
